<template>
  <div id="xx">
    <div class="daohang">
      <div class="box2" v-if="isxia">
        <scroller lock-y scrollbar-x>
          <div class="box1">
            <div class="box1-item" v-for="i in sum" @click="dianji" :class="{black:text==i}"><span>{{i}}</span></div>
          </div>
        </scroller>
      </div>
      <div class="quanbu" v-else>全部选项</div>
      <div id="xiala" @click="caidan"><span class="fa fa-angle-right"></span></div>
    </div>
    <transition name="down">
      <div class="box3" v-if="!isxia">
        <div class="box3-item" v-for="i in sum"><span class="sun">{{' ' + i + ' '}}</span></div>
      </div>
    </transition>
  </div>
</template>


<script>
  import { Scroller } from 'vux'
  export default {
    components: {
      Scroller
    },
    data() {
      return {
        showList1: true,
        scrollTop: 0,    
        onFetching: false,
        bottomCount: 20,
        sum: ["首页", "护肤品", "彩妆香氛", "腕表", "箱包", "配饰", "生活", "科颜氏", "浪琴", "天梭", "乔治阿玛...", "蔻驰", "雅诗兰黛", "潘多拉", "兰蔻"],
        isxia: true,
        angle: 0,
        text:"首页",
      }
    },
    // mounted() {
    //   this.$nextTick(() => {
    //     this.$refs.scrollerEvent.reset({ top: 0 })
    //   })
    //   this.$nextTick(() => {
    //     this.$refs.scrollerBottom.reset({ top: 0 })
    //   })
    // },
    methods: {
      dianji: function (e) {
        // console.log(e.target.textContent)
        this.text = e.target.textContent;
        // console.log(this.text)
        // e.target.style.color = "black";
        // e.target.style.borderBottom = "solid 5px black";
      },
      caidan: function () {
        var yu = document.getElementById("xiala");
        if (this.isxia) {
          this.isxia = !this.isxia;
          this.angle = 90;
          yu.style.transform = "rotate(" + this.angle + "deg)";
        } else {
          this.isxia = !this.isxia;
          this.angle = 0;
          yu.style.transform = "rotate(" + this.angle + "deg)";
        }
      },
      onScrollBottom() {
        if (this.onFetching) {
        } else {
          this.onFetching = true
          setTimeout(() => {
            this.bottomCount += 10
            this.$nextTick(() => {
              this.$refs.scrollerBottom.reset()
            })
            this.onFetching = false
          }, 2000)
        }
      },
      onScroll(pos) {
        this.scrollTop = pos.top
      },
      onCellClick() {
        window.alert('cell click')
      },
      onClickButton() {
        window.alert('click')
      },
      changeList() {
        this.showList1 = false
        this.$nextTick(() => {
          this.$refs.scroller.reset({
            top: 0
          })
        })
      }
    }
  }

</script>

<style scoped>
  .ax {
    color: black;
  }

  #xx {
    position: relative;
    background-color: white;
  }

  .daohang {
    display: flex;
    justify-content: space-around;
    padding-right: 10px;
    background-color: white;
  }

  #xiala {
    border: solid 1px #aaa;
    border-radius: 50%;
    height: 4vh;
    width: 4vh;
    margin: 3vh 1vh;
    text-align: center;
    line-height: 3vh;
    color: #aaa;
  }

  .box1 {
    height: 10vh;
    position: relative;
    display: flex;
    width: 860px;
    color: #aaa;
  }

  .quanbu {
    line-height: 10vh;
    width: 87vw;
    margin-left: 15px;
    color: #aaa;
  }

  .box2 {
    width: 87vw;
    /*border: solid 1px black;*/
    overflow: hidden;
  }

  .box1-item {
    height: 10vh;
    /*background-color: #ccc;*/
    /*display:inline-block;*/
    margin-left: 15px;
    /*float: left;*/
    text-align: center;
    line-height: 10vh;
  }

  .box1-item:first-child {
    margin-left: 10px;
  }

  .box3-item {
    width: 25vw;
    height: 12vw;
    border: solid 1px #eee;
    border-collapse: collapse;
  }
  .box3-item:nth-of-type(1){
    color: red;
    border-bottom: 2px solid red;
  }

  .box3 {
    z-index: 10;
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    line-height: 12vw;
    position: absolute;
  }


  .down-leave {

    opacity: 1;
  }

  .down-leave-active {
    transition: all 0.7s;
  }

  .down-leave-to {

    opacity: 0;
  }

  .down-enter {

    opacity: 0;
  }

  .down-enter-active {
    transition: all 0.7s;
  }

  .down-enter-to {
    opacity: 1;

  }
  .black{
    color: black;
    border-bottom: 2px solid red;
  }
</style>